React Native 和 Native 之间自由切换

发表于   |   分类于   |     |   热度

其实在学习 RN 的时候，一直都有种想法，RN 在界面布局上确有其独到之处，但有时候并不如 Native 来的舒服，而且第三方的控件/组件也没有 Native 的丰富，因此就想有些界面能不能 Native 来写，然后再跳回 React Native，并且可以相互传参，应该是种很爽的体验。

  1. 首先创建RN项目，定下基调，整个 APP 大部分都是通过 RN 实现的，因莫名的原因，个别页面要使用 iOS 实现。

    1
    2
    // RN 命令行创建项目
    react-native init RNJump

  2. 几乎所有的 App 都有 Navigator，为了方便（懒），就直接使用 NavigatorIOS，并设置了根视图 Root

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <NavigatorIOS
    	 initialRoute={{
    	     component: Root,
    	     title: 'RN 首页',
    	
    	 }}
    	 barTintColor= 'cyan'
    	 style={{flex: 1}}
    	
     />

  3. RN传参：root 页面 push 下一个页面，并传递一个简单的参数 text: 'root'

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     <Text onPress={()=>{
        this.props.navigator.push({
            component: Second,
            title: 'RN第二页',
            passProps: {
                text: 'root'
            }
        })
    }}>
       跳到第二页
    </Text>

  4. iOS 准备工作：因为 RN 中实现了Navigator, 所以在 iOS 中也要有对应的 NavigationController，最主要的也是要实现 push 动画，当然自定义也是可以的。

    1
    2
    3
    4
    5
    6
    7
    8
    // AppDelegate.m
      UIViewController *rootViewController = [UIViewController new];
      rootViewController.view = rootView;
      
      self.navi = [[UINavigationController alloc] initWithRootViewController:rootViewController];
      self.window.rootViewController = self.navi;
      // 这里设置hidden，是为了不覆盖 RN 中的 navigator
      self.navi.navigationBar.hidden = YES;

  5. 这时候 iOS 有自己的navigationController， RN 也有它的 navigator，虽然表现形式一样，但是相互之间并不能真正调用彼此，必须要有一个方法在中间搭桥。这就需要之前的RN 调用 Native模块中的调用方法

    • 实现协议 <RCTBridgeModule>
    • 实现跳转方法 RCT_EXPORT_METHOD

    • RN 调用方法，进行跳转和传参

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      // NativeViewController.m
      RCT_EXPORT_MODULE(NativeVC);
        // RN 调用该方法，并且传参
      RCT_EXPORT_METHOD(goToNextWith:(NSString *)aStr) {
         // 这里必须返回主线程进行 push
         dispatch_async(dispatch_get_main_queue(), ^{
             AppDelegate *app= (AppDelegate *)[[UIApplication sharedApplication] delegate];
             self.paramsString = aStr;
             [app.navi pushViewController:self animated:YES];
         });
       
      }
      // second.js
      import {NativeModules} from 'react-native';
      var native = NativeModules.NativeVC;
      <Text onPress={()=>{
             native.goToNextWith('我是从js过来的');
          }}>
            跳到Native
      </Text>

  6. 最后就是从 iOS 再回到 RN，这个就比较简单了，其实就是第 1 步的手动实现

    • 创建下一个 VC NextNativeViewController
    • RCTRootView 替换 VC.view

    • 传参是通过 initialProperties: 字典传递的，当然也可以手动赋值属性 rootView.appProperties

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      // NextNativeViewController.m
       NSDictionary *dic = @{@"text": @"从Xcode传过来的参数"};
         NSURL *jsCodeLocation;
       
         jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"NextSecond" fallbackResource:nil];
       
         RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"NextSecond" initialProperties:dic launchOptions:nil];
         rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
       
         self.view = rootView;
         
         // NextSecond.js 
         export default class NextSecond extends Component {}
         // 注册'NextSecond' 必须跟 moduleName 一致
         AppRegistry.registerComponent('NextSecond', ()=> NextSecond);

  7. 这时候外层使用 iOS 的 VC，内层使用 RN 的 rootView，你可以在 js 文件中处理所有UI和逻辑。但是，跳转下一个页面的时候，还是只能按照第 6 步的方式进行包装，如果想像第 3 步那样，就必须再一次实现第 2 步，重新初始化一个 RN 的 navigator, 并设置 component

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <NavigatorIOS
         initialRoute={{
             component: RealView,
             title: 'RealView',
             passProps:{text: this.props.text}
         }}
         barTintColor= 'cyan'
         style={{flex: 1}}
     />

RN -> N

简单画了个流程图可能会清晰易懂一点。源码这里

原本还想写点，反过来的情况，即，App 大部分是 Native 实现的，部分页面需要 RN 实现，这之间怎么跳转、传参，又想了想，几乎一样，就不啰嗦了，虽然当初不明白的时候想了好久，但真正想明白了，其实很简单。当然也写了个demo，有兴趣可以看看这里。

总结：

  1. RN 本质上就是写界面UI的，声明了 RCTRootView 嵌在 ViewController里面。不过这个 view 在 RN 中可以当成 VC 来使用，真正跳转到 Native 的时候，就显露本质了。

  2. iOS 中的 navigationController.navigationBar 跟 RN 中的 navigator 虽然表现形式相同，但并不能共用，而且 iOS 会覆盖RN的实现。因此，必须分开处理，iOS 中就需要隐藏 navigationBar

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    - (void)viewWillAppear:(BOOL)animated
    {
    	    [super viewWillAppear:animated];
    	    self.navigationController.navigationBar.hidden = NO;
        
     }
    - (void)viewWillDisappear:(BOOL)animated
    {
    	    [super viewWillDisappear:animated];
    	    self.navigationController.navigationBar.hidden = YES;
    }

    当然如果是自定义导航栏的话不用考虑这个问题。

  3. RN 和 N 之间自由切换，目前想到的是这个方法，当然还没研究源码， 后续也许会有更好的解决办法，可以共用一个导航栏，而不必分开处理。

  4. 浅薄之见，如果有错误的地方，万望指正，感激不尽！